<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="日期：" prop="date">
        <DatePicker v-model="searchForm.date" placeholder="请选择日期" style="width: 200px" type="date"></DatePicker>
      </Form-item>
      <Form-item label="车牌号：" prop="license_plate_num">
        <Input
          v-model="searchForm.license_plate_num"
          clearable
          placeholder="支持模糊搜索"
          style="width: 200px"
          type="text"
        />
      </Form-item>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="选择车牌号" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item style="margin-left:-70px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button icon="md-refresh" @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <Button
      icon="md-cloud-download"
      style="margin-bottom:10px;"
      type="primary"
      @click="exportData"
    >导出
    </Button>
    <Table
      ref="table"
      :columns="columns"
      :data="data"
      :loading="loading"
      :summary-method="handleSummary"
      border
      show-summary
      size="small"
    ></Table>
  </Card>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {
        line: '-1',
        license_plate_num: '',
        date: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      columns: [
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '线路',
          key: 'line',
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'center'
        },
        {
          title: '一卡通收入',
          key: 'card',
          align: 'right'
        },
        {
          title: '邮储收入',
          key: 'post',
          align: 'right'
        },
        {
          title: '现金收入',
          key: 'cash',
          align: 'right'
        },
        {
          title: '微信收入',
          key: 'wechat',
          align: 'right'
        },
        {
          title: '支付宝收入',
          key: 'alipay',
          align: 'right'
        },
        {
          title: '包车收入',
          key: 'charteredCar',
          align: 'right'
        },
        {
          title: '合计收入',
          key: 'total',
          align: 'right'
        }
      ],
      data: [
        {
          license_plate_num: '陕G21039',
          line: '1路',
          date: '2019-11-11',
          card: 200,
          post: 200,
          cash: 200,
          wechat: 200,
          alipay: 200,
          charteredCar: 200,
          total: 1200
        },
        {
          license_plate_num: '陕G21039',
          line: '2路',
          date: '2019-11-11',
          card: 200,
          post: 200,
          cash: 200,
          wechat: 200,
          alipay: 200,
          charteredCar: 200,
          total: 1200
        }
      ],
      lines: []
    }
  },
  mounted() {
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: '收入统计',
        original: false
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getIncomeCardList()
    },
    handleSummary({columns, data}) {
      const sums = {}
      columns.forEach((column, index) => {
        const key = column.key
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          }
          return
        }
        const values = data.map(item => Number(item[key]))
        if (!values.every(value => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[key] = {
            key,
            value: v + ' 元'
          }
        } else {
          sums[key] = {
            key,
            value: '-'
          }
        }
      })

      return sums
    },
    init() {
    }
  }
}
</script>
